<template>
  <ComWrapper>
    <div class="bruce flex-ct-y" data-title="放大镜">
      <div class="magnifier" @mousemove="move" />
    </div>
  </ComWrapper>
</template>

<script setup>
function move(e) {
  //相对父节点区域xxx定位
  // 水平方向偏移量 = offsetX * 倍率 - 放大镜宽度 / 倍率
  // 垂直方向偏移量 = offsetY * 倍率 - 放大镜高度 / 倍率
  e.target.style.setProperty('--x', `${e.offsetX}px`)
  e.target.style.setProperty('--y', `${e.offsetY}px`)
}
</script>

<style scoped lang="scss">
$ratio: 2;
$box-w: 600px;
$box-h: 400px;
$outbox-w: $box-w * $ratio;
$outbox-h: $box-h * $ratio;
$box-bg: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F10454033294%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637566048&t=91d10205c38432b2394b0cf497c14030";
.magnifier{
  --x: 0;
	--y: 0;
  @include wh($box-w, $box-h);
  cursor: pointer;
  overflow: hidden;
	position: relative;
  
	background: url($box-bg) no-repeat center/100% 100%;
	&::before {
		position: absolute;
		left: var(--x);
		top: var(--y);
    --size: 0;
    content: "";
    @include borderRadius(100%);
    @include wh(var(--size), var(--size));
    // 使用will-change改善left和top因改变而引发的性能问题
    will-change: left, top;
		transform: translate(-50%, -50%);
    box-shadow: 1px 1px 3px rgba(#000, .5);
    // 水平方向偏移量 = offsetX * 倍率 - 放大镜宽度 / 倍率
    // 垂直方向偏移量 = offsetY * 倍率 - 放大镜高度 / 倍率
    $scale-x: calc(var(--size) / #{$ratio} - #{$ratio} * var(--x));
		$scale-y: calc(var(--size) / #{$ratio} - #{$ratio} * var(--y));
		background: #333 url($box-bg) no-repeat $scale-x $scale-y/$outbox-w $outbox-h;
		
	}
  &:hover::before {
		--size: 100px;
	}
}
</style>
